// 导航栏组件
// 实现功能：
// 1. 使用Zustand管理导航栏固定状态和菜单展开状态
// 2. 监听滚动事件实现导航栏动态样式
// 3. 响应式菜单切换（移动端/桌面端适配）

import { useEffect } from 'react';
import { Link } from 'react-scroll';
import useStore from '../store/useStore';
import { MenuOutlined } from '@ant-design/icons';
import  '@/assets/css/navbar.css';

const Navbar = () => {
  // 从Zustand store获取状态和方法
  const { isNavbarSticky, isMenuOpen, setNavbarSticky, toggleMenu } = useStore();

  // 滚动事件监听
  useEffect(() => {
    const handleScroll = () => {
      // 当滚动超过顶部时更新导航栏固定状态
      setNavbarSticky(window.scrollY > 0);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [setNavbarSticky]);

  return (
    <nav className={`navbar ${isNavbarSticky ? 'navbar--sticky' : ''}`}>
      <div className="inner-width flex items-center justify-between">
        {/* 根据状态切换logo颜色 */}
        <Link to="home" className={`navbar__logo ${isNavbarSticky ? 'navbar__logo--sticky' : 'navbar__logo--normal'}`} />
        
        {/* 移动端菜单切换按钮 */}
        <button
          className="navbar__menu-btn"
          onClick={toggleMenu}
        >
          <MenuOutlined className={`navbar__menu-btn `} />
        </button>

        {/* 响应式菜单容器 */}
        <div className={`navbar__menu-container ${isMenuOpen ? 'navbar__menu-container--open' : 'navbar__menu-container--closed'}`}>
          {[
            { to: 'home', text: '主页' },
            { to: 'about', text: '个人介绍' },
            { to: 'portfolio', text: '作品集' },
            { to: 'blogs', text: '博客' },
            { to: 'certificates', text: '荣誉奖项' },
            { to: 'life', text: '生活' },
            { to: 'contact', text: '留言' },
          ].map((item) => (
            <Link
              key={item.to}
              to={item.to}
              spy={true}
              smooth={true}
              offset={-100}
              duration={100}
              // 动态文字颜色（固定状态或菜单展开时显示黑色）
              className="navbar__menu-item"
              onClick={() => isMenuOpen && toggleMenu()} // 点击菜单项自动关闭移动端菜单
            >
              {item.text}
            </Link>
          ))}
        </div>
      </div>
    </nav>
  );
};

export default Navbar;